import { Component } from 'react';
import AlgorithmHelper from './AlgorithmHelper';
import './SLM.css';
import AlgorithmImport from './algorithms/AlgorithmImport';

import Algorihtms from './SLM_20220301.json';

class SLM extends Component{
  constructor(props){
    super(props);

    this.state={
      selected   : -1,              // 选中算法
      algorithmImp  : undefined,    // 算法实现
      algorithmList : []            // 算法列表
    }

    this.home             = this.home.bind(this);
    this.cancelArrowEvent = this.cancelArrowEvent.bind(this);
    this.handleKeyDown    = this.handleKeyDown.bind(this);
    this.handleMenuClick  = this.handleMenuClick.bind(this);

    this.init            = this.init.bind(this);
    this.setupAlgorithm  = this.setupAlgorithm.bind(this);
  }

  componentDidMount(){
    
    this.figureDiv = document.getElementById('figure');
    this.tableDiv  = document.getElementById('table');
    this.trainDiv  = document.getElementById('train');
    this.modelDiv  = document.getElementById('model');
    this.testDiv   = document.getElementById('test');

    this.setState({
      selected    : 0,
      algorithmList : Algorihtms.Algorithms
    })

    this.init(Algorihtms.Algorithms[0].id);
    document.onkeydown=this.cancelArrowEvent;
    window.addEventListener('keydown', this.handleKeyDown, false);
  }

  componentWillUnmount(){
    window.removeEventListener('keydown', this.handleKeyDown, false);
  }

  
  cancelArrowEvent(event){
    if(event.key === 'ArrowDown' || event.key === 'ArrowUp'){
      return false;
    }
  }

  handleKeyDown(event){
    if(event.key === 'ArrowDown'){
      let selected = this.state.selected;
      if(selected < this.state.algorithmList.length - 1){
        selected += 1;
      
 
        this.init(this.state.algorithmList[selected].id);
        this.setState({
          selected : selected
        })
      }
    }
    else if(event.key === 'ArrowUp'){
      let selected = this.state.selected;
      if(selected > 0){
        selected -= 1;
        
        this.init(this.state.algorithmList[selected].id);
        this.setState({
          selected : selected
        })
      }
    }
  }

  handleMenuClick(event){
    const key = event.target.id;
    this.setState({
      selected : key
    })
    this.init(this.state.algorithmList[key].id);
  }


  home(){
    this.props.home();
  }

  init(id){
    if(!id) id = this.state.algorithmList[this.state.selected].id;
    
    this.resetAlgorithm();
    if(!id) return;

    AlgorithmImport(id, this.setupAlgorithm, this.resetAlgorithm);   
  }

  resetAlgorithm(){
    this.figureDiv.innerHTML = '...';
    this.tableDiv.innerHTML  = '...';
    this.trainDiv.innerHTML  = '...';
    this.modelDiv.innerHTML  = '...';
    this.testDiv.innerHTML   = '...';

    this.setState({
      algorithmImp : undefined
    })
  }

  setupAlgorithm(algorithmModule){
    const algorithmImp = new algorithmModule.default();

    const figure = this.figureDiv;
    const table  = this.tableDiv;
    const train  = this.trainDiv;
    const model  = this.modelDiv;
    const test   = this.testDiv;

    if(algorithmImp){
      algorithmImp.domFigure  = figure;
      algorithmImp.domTable   = table;
      algorithmImp.domTrain   = train;
      algorithmImp.domModel   = model;
      algorithmImp.domTest    = test;

      algorithmImp.init();
    }

    this.setState({
      algorithmImp : algorithmImp
    })
  }

  _createAlgorithmMene(){
    const algorithms = this.state.algorithmList;
    const selected   = parseInt(this.state.selected);

    return algorithms.map((item, key)=>
      <button className={key===selected?'menu-selected':'menu'} 
        key={key} 
        id={key}
        onClick={this.handleMenuClick}>
      {item.name}</button>
    );
  }

  render(){
    return (
      <div className='SLM'>
        <div className='slider'>
          <button onClick={this.home}>主页面</button>
          <b>统计学习方法</b>
          {this._createAlgorithmMene()}
        </div>
        <div className='body'>
          <AlgorithmHelper 
            algorithm    = {this.state.algorithmList[this.state.selected]}
            algorithmImp = {this.state.algorithmImp} 
            figure       = {this.figure}
            table        = {this.table}
          />
        </div>
      </div>
    );
  }
}

export default SLM;